<template>
	<div class="goods">
		<div class="goods-img cursor" @click.stop="openWindow(data, 'taobao')">
			<img :src="data.itemImg | image_ali" />
		</div>

		<div class="goods-content">
			<div class="goods-content-title cursor" @click.stop="openWindow(data)">
				{{ data.itemTitle }}
			</div>

			<div class="goods-content-other">
				<div class="tag">点击时间：{{ data.clickTime | format_date }}</div>

				<div class="tag _primary">
					犹豫时长：<span>{{ hesitateTime }}</span>
				</div>
			</div>

			<div class="goods-content-other ">
				<div class="tag">创建时间：{{ data.tkCreateTime | format_date }}</div>
			</div>

			<div class="goods-content-other">
				<div class="tag">付款时间：{{ data.tkPaidTime | format_date }}</div>

				<div class="tag _danger">
					付款金额：
					<span>{{ data.alipayTotalPrice || 0 }}元</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';

export default {
	props: {
		data: [Object]
	},
	computed: {
		hesitateTime() {
			let date1 = this.data.clickTime;
			let date2 = this.data.tkPaidTime;

			if (!date1 || !date2) {
				return '无';
			}

			let h = moment(date2).diff(date1, 'hour');
			let m = moment(date2).diff(date1, 'minute');
			let s = moment(date2).diff(date1, 'second');

			let label = '';

			if (h) {
				label += `${h}时`;
			}

			if (m) {
				label += `${m % 60}分`;
			}

			if (s) {
				label += `${s % 60}秒`;
			}

			return label;
		}
	},
	methods: {
		openWindow(data, type = 'else') {
			console.log(data);
			if (type == 'taobao') {
				window.open(data.itemLink, '_blank');
				return;
			}
			this.$emit('showdetail', {
				product: data.itemTitle,
				itemId: data.itemId,
				itemLink: data.itemLink
			});
		}
	}
};
</script>

<style lang="stylus" scoped>

.goods {
	display: flex;
	align-items: center;
	padding: 5px 20px;
	.goods-img {
		flex-shrink 0
		width: 88px;
		height: 88px;
		border: 1px slid #ccc;
		border-radius: 100%;
		overflow hidden
		img {
			width 100%
			height 100%
		}
	}

	.goods-content {
		display: flex;
		height 110px
		flex: 1;
		flex-direction: column;
		justify-content space-between
		margin-left: 25px;
		text-align: left;
		width: calc(100% - 113px);

		.goods-content-title {
			font-weight: 500;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-size: 13px;
			color: #000;
			transition .3s
			height 20px
			line-height 20px
			&:hover {
				color $main-color
			}
		}

		.goods-content-other {
			display: flex;
			align-items: center;
			margin-top: 5px;

			.tag {
				// background-color: #eee;
				padding: 0 5px;
				border-radius: 3px;
				margin-right: 10px;
				color #4D4F5C

				&._primary {
					// background-color: $color-primary;
					// color: #fff;
				}

				&._danger {
					// background-color: $color-danger;
					// color: #fff;
				}
			}
		}

		.price {
			font-size: 14px;
		}
	}
}
</style>
